<template>
  <div class="detail-container" >
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/group' }">小组列表</el-breadcrumb-item>
    <el-breadcrumb-item>组内空间</el-breadcrumb-item>
  </el-breadcrumb>
    <div class="detail-top">
      <el-button class="btn-new" type="warning" @click="write(gid)">新建文章</el-button>
      <el-button type="warning" class="el-icon-s-tools" plain @click="manage"></el-button>
    </div>
    <div class="title">
      <p class="big-title">{{list.groupname}}</p>
      <p class="en-title">共&nbsp;<span>{{list.totalmembers}}</span>&nbsp;棵小柚子</p>
    </div>
    <span class="total">本小组已累计发布 <span style="color: orange">{{docs.length}}</span> 篇柚记</span>
        <el-divider content-position="left">
          <span>
            <el-button type="warning" plain @click="loadDocs()">全组柚记</el-button>
          </span>
        <el-divider direction="vertical"></el-divider>
        <span>
          <el-button type="warning" plain @click="loadPerson()">个人柚记</el-button>
        </span>
        </el-divider>
        <div v-show="flag && isShow"  v-loading="loading2" class="card-public">
            <div class="detail-nav">
              <div class="nav-list">
              </div>
              <div class="block">
                <el-input placeholder="请输入人名搜索文章" v-model="inputValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchArt"></el-button>
                </el-input>
              </div>
            </div>
            <div  class="detail-list" >
              <el-row :gutter="50">
                <el-col :span="6" v-for="(item, index) in docs.slice((this.currentPage - 1)*pagesize,currentPage*pagesize)" :key="index">
                  <div class="grid-content bg-purple" @click="getList(item.id)">
                  <el-tooltip class="item" effect="dark" content="点击查看文章详情" placement="top">
                    <el-image :src="item.cover"></el-image>
                  </el-tooltip>
                  <div class="list-dsrc">
                    <span class="list-name" :title="item.docname">{{item.docname}}</span>
                    <p><el-tag type="success">{{item.identity ? item.identity : '文档'}}</el-tag></p>
                    <div class="list-bottom">
                      <el-avatar  class="avatar" style="margin-right:-50px;margin-top: 0px;" :size="35" :src="item.userpic"></el-avatar>
                      <p style="margin-left:25px;">{{item.nickname}}</p>
                      <p class="end">{{item.createtime | dateFmt}}</p>
                    </div>
                  </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="detail-bottom">
              <el-pagination  background layout="prev, pager, next"
                                    @current-change="handleCurrentChange"
                                    :page-sizes="[8]"
                                    :page-size="pagesize"
                                    :current-page="currentPage"
                                    :total="this.docs.length">
              </el-pagination>
            </div>
        </div>
        <div v-show="!(flag || isShow)" class="card-person">
          <div class="detail-list">
              <el-row :gutter="50" >
                <el-col :span="6" v-for="(item, index) in person.slice((this.currentPage - 1)*pagesize,currentPage*pagesize)" :key="index">
                  <div class="grid-content bg-purple" @click="getList(item.id)">
                  <el-tooltip class="item" effect="dark" content="点击文章详情操作" placement="top-start">
                    <el-image :src="item.cover"></el-image>
                  </el-tooltip>
                  <div class="list-dsrc">
                    <span class="list-name">{{item.docname}}</span>
                    <p><el-tag>{{item.identity ? item.identity : '文档'}}</el-tag></p>
                    <div class="list-bottom">
                      <el-avatar  class="avatar" style="margin-right:-70px;margin-top: 0px;" :size="35" :src="item.userpic"></el-avatar>
                      <p style="margin-left:50px;">{{item.nickname}}</p>
                      <p class="end">{{item.createtime | dateFmt}}</p>
                    </div>
                  </div>
                  </div>
                </el-col>
                </el-row>
          </div>
            <div class="detail-bottom">
              <el-pagination  background layout="prev, pager, next"
                                    @current-change="handleCurrentChange"
                                    :page-sizes="[8]"
                                    :page-size="pagesize"
                                    :current-page="currentPage"
                                    :total="this.person.length">
              </el-pagination>
            </div>
        </div>
        <div v-show="(isShow === false) && (flag === true)"  v-loading="loading2" class="card-public">
            <div class="detail-nav">
              <div class="nav-list">
              </div>
              <div class="block">
                <el-input placeholder="请输入人名搜索文章" v-model="inputValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchArt"></el-button>
                </el-input>
              </div>
            </div>
            <div  class="detail-list" >
              <el-row :gutter="50">
                <el-col :span="6" v-for="(item, index) in searchDocs.slice((this.currentPage - 1)*pagesize,currentPage*pagesize)" :key="index">
                  <div class="grid-content bg-purple" @click="getList(item.id)">
                  <el-tooltip class="item" effect="dark" content="点击查看文章详情" placement="top">
                    <el-image :src="item.cover"></el-image>
                  </el-tooltip>
                  <div class="list-dsrc">
                    <span class="list-name" :title="item.docname">{{item.docname}}</span>
                    <p><el-tag type="success">{{item.identity ? item.identity : '文档'}}</el-tag></p>
                    <div class="list-bottom">
                      <el-avatar  class="avatar" style="margin-right:-50px;margin-top: 0px;" :size="35" :src="item.userpic"></el-avatar>
                      <p style="margin-left:25px;">{{item.nickname}}</p>
                      <p class="end">{{item.createtime | dateFmt}}</p>
                    </div>
                  </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="detail-bottom">
              <el-pagination  background layout="prev, pager, next"
                                    @current-change="handleCurrentChange"
                                    :page-sizes="[8]"
                                    :page-size="pagesize"
                                    :current-page="currentPage"
                                    :total="this.searchDocs.length">
              </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getList, allDocs, getPerson, search } from '@/utils/api/group'
// import '@/utils/plugins/time.js'
export default {
  name: '',
  components: {},
  props: {
    listId: {
      required: true
    }
  },
  filters: {
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      loading2: true,
      flag: true,
      value1: '',
      value2: '',
      list: {}, // 小组数据对象
      docs: [], // 小组成员的文档列表
      currentPage: 1, // 初始页
      pagesize: 8, //    每页的数据
      gid: '',
      person: [], // 个人在小组内发布统计
      isShow: true,
      inputValue: null,
      searchDocs: []
    };
  },
  created () {
    this.loadList()
    this.loadDocs()
    const hashLocation = sessionStorage.getItem("hashLocation");// 缓存中获取当前页面的路由名称
    const newLocation = hashLocation.split("#/")[1];
    // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
    this.$matomo.setCustomUrl("http://39.105.118.190" + "/" + newLocation);// 覆盖页面报告的url，可以自定义页面url，加上本页面路由
    // this.$matomo.trackEvent(shopCode,hashLocation);//事件
    this.$matomo.trackPageView(hashLocation);// 页面名称,可以自定义页面名称
  },
  methods: {
    // 初始化小组名称
    async loadList () {
      const { data: res } = await getList(this.listId)
      this.list = res.data
      this.gid = res.data.gid
      this.loading1 = false
      this.$emit('getlist', this.listId)
    },
    // 初始化小组成员文档列表
    async loadDocs () {
      this.isShow = true;
      this.flag = true;
      const { data: res } = await allDocs(this.listId)
      this.docs = res.data
      this.docs.reverse()
      this.loading2 = false
    },
    async loadPerson () {
      this.isShow = false;
      this.flag = false
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      const { data: res } = await getPerson(this.listId, user.username)
      this.person = res.data
      this.person.reverse()
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    // 创建小组路由页面跳转
    write (gid) {
      this.$router.push({
        name: 'writeArticle',
        params: {
          groId: this.listId,
          listId: -1
        }
      })
    },
    // 管理小组路由页面跳转
    manage () {
      this.$router.push({
        name: 'groupsetting',
        params: {
          listId: this.listId
        }
      })
    },
    // 跳转至文章详情页
    getList (id) {
      this.$router.push({
        name: 'ArticleShow',
        params: {
          listId: id,
          groId: this.gid
        }
      })
    },
    // 搜索功能
    searchArt () {
      if (this.inputValue) {
        search(this.listId, this.inputValue).then(res => {
          this.isShow = false;
          this.flag = true;
          this.searchDocs = [];
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].reverse();
            this.searchDocs.push(...res.data.data[i])
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '输入框内容为空'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-top{
  margin-top: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
  /deep/ .el-input__inner {
      border-radius: 25px;
      background-color: #f3f5f9;
      border: none;
    }
    .el-input {
      width: 18%;
      margin-right: 20px;
    }
    .btn-new{
      width: 100px;
      display: flex;
      justify-content: space-around
    }
    .el-icon-circle-plus::before{
        margin-right: 3px;
      }
}
.title{
    position: relative;
    p{
      text-align: center;
      span{
        color: orange;
      }
    }
    .big-title{
      font-size: 34px;
      position: relative;
      line-height: 22px;
    .en-title{
      margin-top: 0;
    }
  }
}
.el-divider__text{
  font-size: 20px;
}
.el-divider__text.is-left{
  left: 60px;
}
.detail-nav{
  display: flex;
  justify-content: space-between;
 .el-dropdown-link{
    margin-left: 80px;
    font-size: 14px;
  }
  .block{
    margin-right: 20px;
  .demonstration{
  margin-right: 10px;
    }
  }
}
.detail-list{
  margin-top: 15px;
  .el-row {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    cursor: pointer;
    margin-top: 20px;
    border-radius: 4px;
    overflow: hidden;
    .el-image{
      width: 100%;
      height: 55%;
      cursor: pointer;
    }
    .list-dsrc{ margin-left: 20px;
      display: flex;
      flex-direction: column;
      .list-name{
        font-size: 20px;
        font-weight: 200;
        margin-top: 10px;
        width:90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-tag{
        margin-left: -10px;
      }
      p{
        margin: 10px;
      }
    }
    .list-bottom{
      display: flex;
      justify-content: space-between;
      p{
        font-size: 10px;
        line-height: 24px;
        margin-top: 5px;
      }
      /deep/.el-avatar{
        margin-top: 5px;
        margin-right: -60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      }
    }
  }
  .bg-purple {
    background: #fcf0de;
  }
  .grid-content {
    border-radius: 4px;
    height: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
  .grid-content:hover{
                transform: scale(0.9);
                cursor: pointer;
    animation: fade-in;/*动画名称*/
    animation-duration: 0.5s;/*动画持续时间*/
    -webkit-animation:fade-in 0.5s;/*针对webkit内核*/
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
    }
  }
.detail-bottom{
  height: 100px;
  display: flex;
  margin-top: 15px;
  justify-content: space-around;
}
.detail-list .el-col .list-bottom .el-avatar{
  margin-right: 30px;
}
.total{
  float: right;
  margin-top: -40px;
  margin-right: 60px;
}
.end {
  display: inline-block;
  font-size: 13px;
  color: gray;
}
</style>
